import G6 from "@antv/g6";
import { graph } from "./index";
import { useSelectGraphStoreHook } from "@/stores/modules/selectGraph";
const useSelectGraphStore = useSelectGraphStoreHook();
import { uniqueFunc } from "@/utils/index";
import { emitter } from "@/utils/mitt";

const MenuList = [
  {
    title: "add_dimension",
    text: "添加标注",
    isCanvas: true,
    // isLine: true,
  },
  // {
  //   type: "line",
  // },
  // {
  //   title: "edit",
  //   text: "编辑",
  //   isCanvas: true,
  // },
  {
    title: "delete",
    text: "删除已选",
    // isCanvas: true,
  },
  {
    type: "line",
  },
  {
    title: "handle_invert",
    text: "反选其他",
  },
  {
    title: "choose_association",
    text: "选中关联节点",
    // isCanvas: true,
  },
  {
    title: "expand",
    text: "一键拓展",
    // isCanvas: true,
  },
];
import { forEach } from "loadsh";
import {
  handleAddDimension,
  handleHandleInvert,
  handleDeleteObject,
  handleChooseAssociation,
  // handleExpand,
} from "./menuEvent";
import { handleExpandFn } from "@/views/associationAnalysis/canvas/components/actionBar/index"; // 画布
let currentEvt = {};
export const createMenu: any = () => {
  nextTick(() => {
    emitter.on("handleDeleteObject", handleDeleteObject);
  });

  const menu = new G6.Menu({
    className: "custom-menu-bar-association",
    getContent(evt) {
      //表示画布上
      let menuHtml = "";
      currentEvt = evt;
      if (evt.target && evt.target.isCanvas && evt.target.isCanvas()) {
        forEach(MenuList, (item) => {
          const disabel = item.isCanvas ? "disabel" : "";
          getMenuHtml(item, disabel);
        });
        //表示节点上
      } else if (evt.item && evt.item.getType().toUpperCase() === "NODE") {
        forEach(MenuList, (item) => {
          const disabel = item.isNode ? "disabel" : "";
          getMenuHtml(item, disabel);
        });
      } else if (evt.item && evt.item.getType().toUpperCase() === "EDGE") {
        forEach(MenuList, (item) => {
          const disabel = item.isLine ? "disabel" : "";
          getMenuHtml(item, disabel);
        });
      }
      function getMenuHtml(item, disabel) {
        menuHtml +=
          item.type != "line"
            ? `<li class='flex justify-center items-center text-sm hover:text-[#2C51D7]
           hover:bg-[#E9E9EB] h-8 cursor-pointer ${disabel}' titles="${item.title}">
            ${item.text}
           </li>`
            : `<li class="line"></li>`;
      }
      return `<ul class='w-32'>
        ${menuHtml}
      </ul>`;
    },
    handleMenuClick: (target) => {
      const titles = target.getAttribute("titles");
      const selectCanvas = useSelectGraphStore.getSelectCanvas();
      switch (titles) {
        case "add_dimension":
          handleAddDimension(currentEvt);
          break;
        case "handle_invert":
          handleHandleInvert();
          break;
        case "delete":
          handleDeleteObject();
          break;
        case "choose_association":
          handleChooseAssociation(currentEvt);
          break;
        case "expand":
          // handleExpand(currentEvt);
          // console.log(currentEvt, selectCanvas);
          if (currentEvt.item) {
            // 右键是节点的时候
            if (selectCanvas && selectCanvas.nodes.length) {
              // 已经有选中的节点需要把我右键的节点和选中节点合并
              const data = {
                nodes: selectCanvas.nodes,
                edges: selectCanvas.edges,
              };
              data.nodes.push(currentEvt.item.getModel());
              data.nodes = uniqueFunc(data.nodes);
              useSelectGraphStore.setSelectCanvas(data);
            } else {
              const data = {
                nodes: [currentEvt.item.getModel()],
                edges: [],
              };
              useSelectGraphStore.setSelectCanvas(data);
            }
          }
          handleExpandFn();
          break;
        default:
          break;
      }
    },
    itemTypes: ["node", "canvas", "edge"],
  });
  return menu;
};
